<template>
  <Siri v-if="touchStatus" :text="asrText" />
  <transition name="scale-y" mode="out-in">
    <hand-box
      v-if="asrType === 'asr'"
      class="w-[170px] flc text-[12px]"
      type="1"
      tag="button"
      @touchstart="onTouchstart"
      @touchend="onTouchEnd"
    >
      <icon-font name="h5-asr" class="mr-[10px]" />
      <span class="select-none">按住说话</span>
    </hand-box>
    <hand-box
      v-else
      class="w-[170px] flc text-[12px]"
      type="1"
      tag="button"
      @click="onClick"
    >
      <span class="select-none">点击输入文字...</span>
    </hand-box>
  </transition>
</template>

<script lang="ts" setup name="RecordAsr">
import { closeBranch, useTost } from "@/utils/comps";
import { useTtsaStore } from "@/store/ttsa";
import XmovASR from "xmov-asr-sdk";
import { useTrack } from "@/hooks";

const ttsa = useTtsaStore();
const partial = ref("");
const resultText = ref("");
const audioId = ref("");
const asrType: any = inject("asrType");
const inputVisible: any = inject("inputVisible");
const touchStatus: any = inject("touchStatus");
const { setTrack } = useTrack();

const default_config = {
  origin: import.meta.env.XMOV_APP_XASR_ORIGIN,
  app_id: import.meta.env.XMOV_APP_XASR_APPID,
  secret_key: import.meta.env.XMOV_APP_XASR_SECRET_KEY,
  hotword_list: [],
};

const asrClient = (config) => {
  const asr = new XmovASR({
    origin: config.origin,
    app_id: config.app_id,
    secret_key: config.secret_key,
    hotword_list: config.hotword_list,
  });
  return asr;
};

const asrText = computed(() => resultText.value + partial.value);
let asrService = null;
const initAsrService = () => {
  asrService = asrClient(default_config);
  asrService.onSocketOpen = () => {
    console.log("连接已建立");
  };
  asrService.onRecStart = (res) => {
    console.log("开始识别", res);
  };
  asrService.onSentenceChange = (res) => {
    console.log("当前这句话部分结果", res);
    partial.value = res?.sentence;
    asrCheck();
  };
  asrService.onSentenceEnd = (res) => {
    resultText.value += res?.sentence;
    if (res.session_id) audioId.value = res.session_id;
    partial.value = "";
    console.log("一句话识别完毕", res);
    asrCheck();
  };
  asrService.onRecComplete = (res) => {
    // asrCheck();
    console.log("识别结束", res);
  };
  asrService.onError = (err) => {
    console.log("识别出错", err);
    useTost(err?.message);
  };
};

const start = () => {
  touchStatus.value = true;
  asrService
    .start()
    .then(() => {
      resultText.value = "";
      partial.value = "";
      audioId.value = "";
    })
    .catch((error) => {
      console.log("服务异常信息", error);
      // touchStatus.value = false;
    });
};

const stop = async () => {
  console.log("touch end record-asr.vue");
  touchStatus.value = false;
  asrService.stop();
  console.log(asrText.value, audioId.value, "rrr");
  if (asrText.value) {
    await ttsa.chat(asrText.value, {
      asr_sessionid: audioId.value,
    });
    resultText.value = "";
    audioId.value = "";
  }
};

const asrCheck = () => {
  if (asrText.value.length > 60) {
    stop();
  }
};

const onTouchstart = async () => {
  console.log("touch start");
  closeBranch();
  if (ttsa.voiceLoading) {
    await ttsa.pause();
  }
  start();
};

const onTouchEnd = () => {
  stop();
};

const onClick = () => {
  closeBranch();
  inputVisible.value = true;
};

onBeforeMount(() => {
  initAsrService();
});

onBeforeUnmount(() => {
  if (asrService.state !== "unready") {
    stop();
    asrService.destroy();
  }
});
</script>

<style module lang="scss"></style>
